<template>
	<view class="">
		<u-navbar title="评价" @leftClick="leftClick" :autoback="true"></u-navbar>
		<view class="flex-col page">
		  <view class="flex-col space-y-20 group_3">
		    <view class="flex-col items-start text-wrapper"><text class="font_2 text_5">追加评价</text></view>
		    <view class="flex-col space-y-384 section_3">
		      <view class="flex-col group_4">
		        <view class="flex-row group_5">
		          <text class="font_3 text_6">评分：</text>
		          <u-rate :count="count" v-model="condition.evaluation"></u-rate>
		          <text class="font_3 text_7">{{condition.evaluation}}分</text>
		        </view>
		        <view class="">
					<u--textarea class="" height="255" v-model="condition.content" placeholder="这里填写评论内容..." ></u--textarea>
				</view>
		      </view>
		      <view @click="submit" class="flex-col items-center button"><text class="font_2 text_9">提交</text></view>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
	import {addEvaluate} from '@/api/index.js'
	export default {
		data() {
			return {
				count:5,
				condition:{					
					evaluation:1,
					content:'',
					orderNo:''
				}
			};
		},
		onLoad(option) {
			this.condition.orderNo = option.orderNo;
		},
		methods:{
			leftClick(){
				if (getCurrentPages().length > 1) {
					uni.navigateBack();
				} else {
					uni.switchTab({
						url: '../../pages/index/index'
					})
				}
			},
			submit(){
				this.condition.orderBy = this.$userInfo().phone || '';
				addEvaluate(this.condition).then(res => {
					if(res.code === 200) {
						this.$u.toast('操作成功');
						uni.navigateBack();
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.page {
  background-color: #f4f6f8;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  .space-y-20 {
    & > view:not(:first-child),
    & > text:not(:first-child),
    & > image:not(:first-child) {
      margin-top: 20rpx;
    }
    .text-wrapper {
      padding: 27rpx 0;
      background-color: #ffffff;
      .text_5 {
        margin-left: 31rpx;
        color: #333333;
      }
    }
    .space-y-384 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 384rpx;
      }
      .group_4 {
        padding-left: 42rpx;
        padding-right: 38rpx;
        .group_5 {
          padding: 0 7rpx 21rpx;
          .text_6 {
            color: #777777;
          }
          .image_7 {
            width: 199rpx;
            height: 29rpx;
          }
          .text_7 {
            margin-left: 18rpx;
            color: #ff9702;
          }
        }
        .text-wrapper_2 {
          padding: 23rpx 0 494rpx;
          background-color: #fafafa;
          .text_8 {
            margin-left: 21rpx;
            color: #999999;
            font-weight: 300;
            line-height: 27rpx;
          }
        }
        .font_3 {
          font-size: 28rpx;
          font-family: Microsoft YaHei;
          line-height: 28rpx;
        }
      }
      .button {
        padding: 27rpx 0;
        background-color: #5677fc;
        box-shadow: 0px -5rpx 7rpx #00000026;
		width: 100%;
		position: fixed;
		bottom: 0;
        .text_9 {
          color: #ffffff;
        }
      }
    }
    .section_3 {
      padding-top: 32rpx;
      background-color: #ffffff;
    }
    .font_2 {
      font-size: 34rpx;
      font-family: Microsoft YaHei;
      line-height: 34rpx;
    }
  }
  .group_3 {
    flex: 1 1 auto;
    overflow-y: auto;
  }
}
</style>